<!--<template>-->
<!--  <div class="register-container">-->
<!--    <h2 class="register-title">注册</h2>-->
<!--    <form @submit.prevent="handleRegister">-->
<!--      <div class="form-group">-->
<!--        <label for="username">用户名</label>-->
<!--        <input type="text" id="username" v-model="RegisterDTO.name" required>-->
<!--        <span v-if="errors.name" class="error-message">{{ errors.name }}</span>-->
<!--      </div>-->
<!--      <div class="form-group">-->
<!--        <label for="password">密码</label>-->
<!--        <input type="password" id="password" v-model="RegisterDTO.pwd" required>-->
<!--        <span v-if="errors.pwd" class="error-message">{{ errors.pwd }}</span>-->
<!--      </div>-->
<!--      <div class="form-group">-->
<!--        <label for="phone">手机号</label>-->
<!--        <input type="tel" id="phone" v-model="RegisterDTO.telephone" required>-->
<!--        <span v-if="errors.telephone" class="error-message">{{ errors.telephone }}</span>-->
<!--      </div>-->
<!--      <div class="button-container">-->
<!--        <button type="submit" class="btn">注册</button>-->
<!--      </div>-->
<!--      <p class="login-link">-->
<!--        已有账号？<router-link to="/login" class="login-link-text">登录</router-link>-->
<!--      </p>-->
<!--    </form>-->
<!--  </div>-->
<!--</template>-->

<!--<script>-->
<!--import { reactive } from "vue";-->
<!--import { Register } from "@/api";-->
<!--import { useRouter } from "vue-router";-->

<!--export default {-->
<!--  setup() {-->
<!--    const RegisterDTO = reactive({-->
<!--      name: '',-->
<!--      pwd: '',-->
<!--      telephone: ''-->
<!--    });-->

<!--    const errors = reactive({-->
<!--      name: '',-->
<!--      pwd: '',-->
<!--      telephone: ''-->
<!--    });-->

<!--    const router = useRouter();-->

<!--    const validateForm = () => {-->
<!--      let isValid = true;-->

<!--      // 用户名验证-->
<!--      if (!RegisterDTO.name.trim()) {-->
<!--        errors.name = '用户名不能为空';-->
<!--        isValid = false;-->
<!--      } else if (RegisterDTO.name.length < 3 || RegisterDTO.name.length > 20) {-->
<!--        errors.name = '用户名长度必须在3到20个字符之间';-->
<!--        isValid = false;-->
<!--      } else {-->
<!--        errors.name = '';-->
<!--      }-->

<!--      // 密码验证-->
<!--      if (!RegisterDTO.pwd.trim()) {-->
<!--        errors.pwd = '密码不能为空';-->
<!--        isValid = false;-->
<!--      } else if (RegisterDTO.pwd.length < 6 || RegisterDTO.pwd.length > 20) {-->
<!--        errors.pwd = '密码长度必须在6到20个字符之间';-->
<!--        isValid = false;-->
<!--      } else {-->
<!--        errors.pwd = '';-->
<!--      }-->

<!--      // 手机号验证-->
<!--      if (!RegisterDTO.telephone.trim()) {-->
<!--        errors.telephone = '手机号不能为空';-->
<!--        isValid = false;-->
<!--      } else if (!/^1[3456789]\d{9}$/.test(RegisterDTO.telephone)) {-->
<!--        errors.telephone = '手机号格式不正确';-->
<!--        isValid = false;-->
<!--      } else {-->
<!--        errors.telephone = '';-->
<!--      }-->

<!--      return isValid;-->
<!--    };-->

<!--    const handleRegister = async () => {-->
<!--      if (!validateForm()) {-->
<!--        return;-->
<!--      }-->

<!--      try {-->
<!--        const response = await Register(RegisterDTO);-->
<!--        console.log('Register Response:', response);-->

<!--        if (response.data.code === 200) {-->
<!--          alert('注册成功！');-->
<!--          await router.push('/login'); // 注册成功后跳转到登录页面-->
<!--        } else {-->
<!--          alert(response.data?.data?.errorMsg || response.data?.errorMsg || '注册失败，请稍后重试');-->
<!--        }-->
<!--      } catch (error) {-->
<!--        console.error('Register API Error:', error);-->
<!--        alert('请求失败，请稍后再试');-->
<!--      }-->
<!--    };-->

<!--    return {-->
<!--      RegisterDTO,-->
<!--      errors,-->
<!--      handleRegister,-->
<!--    };-->
<!--  },-->
<!--};-->
<!--</script>-->

<!--<style scoped>-->
<!--.register-container {-->
<!--  max-width: 400px;-->
<!--  margin: 30px auto;-->
<!--  padding: 20px;-->
<!--  background: linear-gradient(135deg, #f9f9f9, #e3e3e3);-->
<!--  border-radius: 16px;-->
<!--  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);-->
<!--  border: 1px solid #ddd;-->
<!--  display: flex;-->
<!--  flex-direction: column;-->
<!--  align-items: center;-->
<!--}-->

<!--.register-title {-->
<!--  text-align: center;-->
<!--  color: #007bff;-->
<!--  margin-bottom: 20px;-->
<!--  font-size: 32px;-->
<!--  font-weight: bold;-->
<!--}-->

<!--.form-group {-->
<!--  width: 100%;-->
<!--  margin-bottom: 15px;-->
<!--  display: flex;-->
<!--  flex-direction: column;-->
<!--}-->

<!--.form-group label {-->
<!--  color: #333;-->
<!--  font-weight: 500;-->
<!--  margin-bottom: 5px;-->
<!--}-->

<!--.form-group input {-->
<!--  padding: 12px;-->
<!--  border: 1px solid #ccc;-->
<!--  border-radius: 8px;-->
<!--  transition: border-color 0.3s ease;-->
<!--  font-size: 16px;-->
<!--  width: 100%;-->
<!--}-->

<!--.form-group input:focus {-->
<!--  border-color: #007bff;-->
<!--}-->

<!--.error-message {-->
<!--  color: #ff4d4f;-->
<!--  font-size: 12px;-->
<!--  margin-top: 5px;-->
<!--}-->

<!--.button-container {-->
<!--  width: 100%;-->
<!--  display: flex;-->
<!--  justify-content: center;-->
<!--  margin-bottom: 15px;-->
<!--}-->

<!--.btn {-->
<!--  width: 50%;-->
<!--  max-width: 200px;-->
<!--  padding: 8px;-->
<!--  background-color: #007bff;-->
<!--  color: #fff;-->
<!--  border: none;-->
<!--  border-radius: 8px;-->
<!--  cursor: pointer;-->
<!--  transition: background-color 0.3s ease;-->
<!--  font-size: 14px;-->
<!--  font-weight: 500;-->
<!--}-->

<!--.btn:hover {-->
<!--  background-color: #0056b3;-->
<!--}-->

<!--.login-link {-->
<!--  text-align: center;-->
<!--  margin-top: 15px;-->
<!--  font-size: 14px;-->
<!--}-->

<!--.login-link-text {-->
<!--  color: #007bff;-->
<!--  text-decoration: none;-->
<!--  transition: color 0.3s ease;-->
<!--}-->

<!--.login-link-text:hover {-->
<!--  text-decoration: underline;-->
<!--  color: #0056b3;-->
<!--}-->

<!--@media (max-width: 576px) {-->
<!--  .register-container {-->
<!--    padding: 15px;-->
<!--  }-->

<!--  .register-title {-->
<!--    font-size: 28px;-->
<!--  }-->

<!--  .form-group input {-->
<!--    padding: 10px;-->
<!--  }-->

<!--  .btn {-->
<!--    width: 80%;-->
<!--    max-width: 200px;-->
<!--    padding: 8px;-->
<!--    font-size: 14px;-->
<!--  }-->

<!--  .login-link {-->
<!--    font-size: 12px;-->
<!--  }-->
<!--}-->
<!--</style>-->
